<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>经销商信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../../css/wx/mui.min.css">
    <link rel="stylesheet" href="../../../css/wx/app.css">
    <link rel="stylesheet" href="../../../css/wx/style.css?v=1"/>
    <link rel="stylesheet" href="../../../css/wx/style-hn.css"/>
    <script type="text/javascript">
        var pageConfig = {
            jss: ["app/gwat153/gwat153-jxs-info"]
        };
    </script>
    <script data-main="../../../js/wx/public/config" src="../../../js/require.js"></script>
    <style>
        .mui-content {
            padding: 0;
        }

        .lf {
            align-items: center;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -moz-box;
            display: flex;
        }

        .mui-scroll ul li {
            background: #fff;
            border-bottom: 1px solid #dadada;
        }

        .mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before {
            position: absolute;
        }

        .rf {
            width: 100%;
        }

        .flexItems .rf p strong {
            font-weight: 400;
        }

        .mui-control-content {
            min-height: -webkit-fill-available;
        }

        .footBtn {
            position: relative;
        }

        .flex-content-center .mui-checkbox.ba {
            width: 100%;
        }

    </style>

</head>

<body>
<div class="mui-content mui-fullscreen flex-container-v">
    <div id="slider" class="mui-slider flex-content-center">
        <div id="sliderSegmentedControl"
             class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted shadow">
            <a class="mui-control-item" href="#item1mobile">
                可选
            </a>
            <a class="mui-control-item" href="#item2mobile">
                已选<span class="mui-badge mui-badge-danger" v-cloak>{{jxschoose.length}}</span>
            </a>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">

                <div id="searchDiv" class="mui-input-row searchBox">
                    <form action="javascript:app.returnFalse();">
                        <i class="mui-icon mui-icon-search"></i>
                        <input @search="toSearch" type="search" class="mui-input-clear" placeholder="经销商、手机号"
                               v-model.trim="keyword">
                    </form>
                </div>

                <div class="mui-scroll-wrapper" id="scroll1" style="top: 58px;">
                    <div class="mui-scroll">
                        <jxsitem :model="items"></jxsitem>
                    </div>
                </div>

            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div id="scrollZ" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <jxsitem2 :model="jxschoose"></jxsitem2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="footer" class="footBtn flexl" STYLE="width:100%;">
        <button @tap.stop="addBtn" type="button" class="mui-btn mui-btn-royal mui-btn-block mui-btn-outlined addCar"><i
                class="iconfont icon icon-0010" style="margin-right: 5px;"></i>新建经销商信息
        </button>
        <button @tap.stop="sureBtn" type="button" class="mui-btn mui-btn-royal mui-btn-block wf-second-bg addCar"><i
                class="iconfont icon icon-0010" style="margin-right: 5px;"></i>确认
        </button>
    </div>
</div>
<script id="customersitem-template" type="text/x-template">
    <ul class="" style="margin: 0;">
        <li v-for="v in model">
            <div class="">
                <div class="flexItems">
                    <div class="lf">
                        <div class="mui-input-row mui-checkbox mui-left">
                            <label></label>
                            <input type="checkbox" v-model="v.checked" @change="select(v)"
                                   :true-value="'1'" :false-value="'0'"
                                   style="left: 0; height:45px;">
                        </div>
                    </div>
                    <div class="rf">
                        <div class="">
                            <p><strong>经销商名称</strong>：{{v.GWAKL004}}</p>
                            <p><strong>手机号码</strong>：{{v.GWAK030}}</p>
                        </div>
                        <div class="flexTogter">
                            <p><strong>详细地址</strong>:</p>
                            <p style="padding-left: 10px;">
                                {{v.GWAK028}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</script>

<script id="customersitem2-template" type="text/x-template">
    <ul class="" style="margin: 0;">
        <li v-for="v in model" click="select(v)">
            <div class="">
                <div class="flexItems">
                    <div class="lf">
                        <div class="mui-input-row mui-checkbox mui-left">
                            <label></label>
                            <input type="checkbox" v-model="v.checked" @change="select(v)"
                                   :true-value="'1'" :false-value="'0'"
                                   style="left: 0; height:45px;">
                        </div>
                    </div>
                    <div class="rf">
                        <div class="">
                            <p><strong>经销商名称</strong>：{{v.GWAKL004}}</p>
                            <p><strong>手机号码</strong>：{{v.GWAK030}}</p>
                        </div>
                        <div class="flexTogter">
                            <p><strong>详细地址</strong>:</p>
                            <p style="padding-left: 10px;">
                                {{v.GWAK028}}
                            </p>
                        </div>
                        <div class="mui-input-row mui-checkbox ba">
                            <label>备案:</label>
                            <input class="ba" type="checkbox" v-model="v.GWBE003" @change="record(v)"
                                   :true-value="'Y'" :false-value="'N'"
                                   style="height:45px;">
                        </div>
                    </div>
                </div>

            </div>
        </li>
    </ul>
</script>
</body>
</html>